<template>
  <div>
  <ul class="list">
      <li v-for="(ele,index) in musicList" :key='ele.id' @click="tiao(ele.id)">
        <div class="code_id" :class='{"red":index<3}' v-if='title'>{{(index+1) | num}}</div>
        <div class="code_id" v-else>{{index+1}}</div>
        <div class="music_info">
          <div class="name">{{ele.name}}</div>
          <div class="authors">
               <!-- 作者可能不止一个：后台返回数组--遍历-{{ele.song.artists[0].name}} -->
              <span v-for="item in ele.ar" :key="item.id">{{item.name}}</span>-{{ele.al.name}}
          </div>
        </div>
        <div class="play">
          <span></span>
        </div>
      </li>
    </ul>

      <!-- 静态布局 -->
    <!-- <ul class="list">
      <li>
          <div class="code_id">1</div>
        <div class="music_info">
          <div class="name">革命</div>
          <div class="authors">作者-xx</div>
        </div>
        <div class="play">
          <span></span>
        </div>
      </li>
      <li>
            <div class="code_id">2</div>
        <div class="music_info">
          <div class="name">革命</div>
          <div class="authors">作者-xx</div>
        </div>
        <div class="play">
          <span></span>
        </div>
      </li>
    </ul> -->
  </div>
</template>

<script>
export default {
  props: ["musicList",'title'],
  //父子组件生命周期执行顺序：
  //父 beforeCreate created beforeMount 子beforeCreate created beforeMount mounted 父mounted
  filters:{
    num(val){
      if(val<10){
        return '0'+val;
      }else{
        return val
      }
    }
  },
  methods:{
    tiao(id){
      this.$router.push({
        path:'/songUrl/'+id
      })
    }
  }
};
</script>

<style scoped lang='less'>
.list {
    background: #fff;
  li {
    display: flex;
    margin-left: 0.2rem;
    height: 1.1rem;
    padding: 0.2rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .code_id{
         width: 0.6rem;
          display: flex;
      align-items: center;
      color: #999;
    }
    .red{
      color: #df3436;
    }
    .music_info {
        width: 5.8rem;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        font-size: 0.34rem;
        color: #333;
      }
      .authors {
        font-size: 0.24rem;
        color: #666;
        padding-top: 0.04rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        span {
          position: relative;
          padding-right: 0.1rem;
          padding-left: 0.02rem;
          &::after {
            content: "/";
            position: absolute;
            right: -2px;
            top: 1px;
          }
          &:last-child {
            padding-right: 0;
          }
          &:last-child::after {
            content: "";
          }
        }
      }
    }
    .play {
      width: 0.84rem;
      display: flex;
      align-items: center;
      span {
        width: 0.44rem;
        height: 0.44rem;
        display: block;
        background: url("../../assets/images/index_icon_2x.png") no-repeat;
        background-size: 3.32rem 1.94rem;
        background-position: -0.48rem 0;
        margin: 0 auto;
      }
    }
  }
}
</style>